<template>
	<view class="my-certificate">
		<view class="list">
			<view class="title">证书列表</view>
			<view v-if="dataObj.list.length">
				<view class="item" v-for="(item, idx) in dataObj.list" :key="item.image_id" @click="previewImg(item.image_url)">
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view class="no-list" v-else>您暂无证书</view>
		</view>
		<view class="list">
			<view class="title">证书查询</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="item" v-for="(item, idx) in pageObj.query" :key="item.id" @click="onQueryTap(item)">
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item, idx) in pageObj.query" :key="item.id" @click="onCopyTap(item)">
			<!-- #endif -->
			
				<view class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					query: [{
						id: 1,
						name: '专项职业能力证书查询',
						url: 'https://ggfw.gdhrss.gov.cn/gdggfw/service/1037.shtml',
					}, {
						id: 2,
						name: '特种作业操作证查询',
						url: 'http://cx.mem.gov.cn',
					}]
				},
				dataObj: {
					list: [],
				}
			}
		},
		onLoad() {
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData(); // 获取数据
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 图片预览
			previewImg(url) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = url
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			onCopyTap(data) {
				//提示模板
				 uni.showModal({
					content: data.url,//模板中提示的内容
					confirmText: '复制内容',
					success:(res)=>{//点击复制内容的后调函数
						// 确认按钮
						if (res.confirm) {
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
								data: data.url,//要被复制的内容
								success:()=>{//复制成功的回调函数
									uni.showToast({//提示
										title:'复制成功'
									})
								}
							});
						}
					}
				});
			},
			// webview
			onQueryTap(data) {
				// #ifdef H5
				window.location.href = data.url
				// #endif
				
				// #ifndef H5
				uni.navigateTo({
					url: './web-view?url=' + data.url + '&title=' + data.name
				});
				// #endif
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['user']['getMyPert'],
					data: {},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj['list'] = data || [];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.my-certificate{
		padding-top: 18rpx;
		.list{
			padding: 32rpx 0 0 36rpx;
			border-radius: 22rpx;
			background-color: #FFFFFF;
			margin-bottom: 18rpx;
			.title{
				position: relative;
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-bottom: 10rpx;
				padding-left: 28rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -6rpx;
					left: 0;
					width: 12rpx;
					height: 12rpx;
					background-color: #FE6B00;
					border-radius: 50%;
				}
			}
			.item{
				position: relative;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #1A1A1A;
				padding: 32rpx 72rpx 32rpx 0;
				border-bottom: 1px solid #EAEFF1;
				&:nth-last-child(1) {
					border: none;
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -15rpx;
					right: 36rpx;
					width: 30rpx;
					height: 30rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100% 100%;
					background-image: url(../../../static/images/common/arrow-right.png);
				}
			}
		}
		.no-list{
			line-height: 30rpx;
			font-size: 30rpx;
			color: #555;
			padding: 32rpx 36rpx;
		}
	}
</style>
